<template>
  <div class="total-layout">
    <!--数据统计-->
    <el-col :span="18">
      <div class="un-handle-layout">
        <el-carousel height="230px" autoplay>
          <!--1为代金券 2为满减劵 3为折扣劵 4为兑换券 -->
          <el-carousel-item>
            <div class="layout-title">代金券</div>
            <div class="total-layout" style="margin-left: 30px">
              <el-row :gutter="15">
                <el-col :span="1"></el-col>
                <el-col :span="7">
                  <div class="total-frame">
                    <img :src="coupons_usage_rate" class="total-icon">
                    <div class="total-title">优惠券使用率</div>
                    <div class="total-value">{{voucherData.usageRate}}%</div>
                  </div>
                </el-col>
                <el-col :span="7">
                  <div class="total-frame">
                    <img :src="coupons_percent_conversion" class="total-icon">
                    <div class="total-title">优惠券转化率</div>
                    <div class="total-value">{{voucherData.percentConversion}}%</div>
                  </div>
                </el-col>
                <el-col :span="7">
                  <div class="total-frame">
                    <img :src="coupons_sales_increase" class="total-icon">
                    <div class="total-title">销售提升</div>
                    <div class="total-value">{{voucherData.salesIncrease}}%</div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-carousel-item>
          <el-carousel-item>
            <div class="layout-title">满减劵</div>
            <div class="total-layout" style="margin-left: 30px">
              <el-row :gutter="15">
                <el-col :span="1"></el-col>
                <el-col :span="7">
                  <div class="total-frame">
                    <img :src="coupons_usage_rate" class="total-icon">
                    <div class="total-title">优惠券使用率</div>
                    <div class="total-value">{{fullDiscountData.usageRate}}%</div>
                  </div>
                </el-col>
                <el-col :span="7">
                  <div class="total-frame">
                    <img :src="coupons_percent_conversion" class="total-icon">
                    <div class="total-title">优惠券转化率</div>
                    <div class="total-value">{{fullDiscountData.percentConversion}}%</div>
                  </div>
                </el-col>
                <el-col :span="7">
                  <div class="total-frame">
                    <img :src="coupons_sales_increase" class="total-icon">
                    <div class="total-title">销售提升</div>
                    <div class="total-value">{{fullDiscountData.salesIncrease}}%</div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-carousel-item>
          <el-carousel-item>
            <div class="layout-title">折扣劵</div>
            <div class="total-layout" style="margin-left: 30px">
              <el-row :gutter="15">
                <el-col :span="1"></el-col>
                <el-col :span="7">
                  <div class="total-frame">
                    <img :src="coupons_usage_rate" class="total-icon">
                    <div class="total-title">优惠券使用率%</div>
                    <div class="total-value">{{discountData.usageRate}}%</div>
                  </div>
                </el-col>
                <el-col :span="7">
                  <div class="total-frame">
                    <img :src="coupons_percent_conversion" class="total-icon">
                    <div class="total-title">优惠券转化率</div>
                    <div class="total-value">{{discountData.percentConversion}}%</div>
                  </div>
                </el-col>
                <el-col :span="7">
                  <div class="total-frame">
                    <img :src="coupons_sales_increase" class="total-icon">
                    <div class="total-title">销售提升</div>
                    <div class="total-value">{{discountData.salesIncrease}}%</div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-carousel-item>
          <el-carousel-item>
            <div class="layout-title">兑换券</div>
            <div class="total-layout" style="margin-left: 30px">
              <el-row :gutter="15">
                <el-col :span="1"></el-col>
                <el-col :span="7">
                  <div class="total-frame">
                    <img :src="coupons_usage_rate" class="total-icon">
                    <div class="total-title">优惠券使用率</div>
                    <div class="total-value">{{exchangeData.usageRate}}%</div>
                  </div>
                </el-col>
                <el-col :span="7">
                  <div class="total-frame">
                    <img :src="coupons_percent_conversion" class="total-icon">
                    <div class="total-title">优惠券转化率</div>
                    <div class="total-value">{{exchangeData.percentConversion}}%</div>
                  </div>
                </el-col>
                <el-col :span="7">
                  <div class="total-frame">
                    <img :src="coupons_sales_increase" class="total-icon">
                    <div class="total-title">销售提升</div>
                    <div class="total-value">{{exchangeData.salesIncrease}}%</div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </el-col>
    <el-col :span="18">
      <div class="un-handle-layout">
        <div class="layout-title">优惠券效率排名</div>
        <div style="width: 850px; height: 400px" ref="echarts"></div>
      </div>
    </el-col>
    <el-card class="mine-layout" shadow="never">
      <div class="head-container">
        <div style="margin-left: 15px">报告</div></div>
        <div style="margin-top: 15px; text-indent: 2em;">
          <div>
            截止到目前，我们共发行了<span style="color:#fe8463">{{reportData.totalCouponsNum}}</span>张优惠券，其中<span style="color:#fe8463">{{reportData.usedCouponsNum}}</span>张已被实际使用，整体使用率为<span style="color:#fe8463">{{ reportData.usageRate }}%</span>.
            在已发放的<span style="color:#fe8463">{{reportData.totalCouponsNum}}</span>张优惠券中，有<span style="color:#fe8463">{{reportData.usedCouponsNum}}</span>张成功引导了购买行为，相应的转化率为<span style="color:#fe8463">{{ reportData.usageRate }}%</span>.
            使用优惠券的顾客平均销售额比未使用优惠券的顾客高出<span style="color:#fe8463">{{ reportData.salesIncrease }}%</span>.</div>
          <div style="text-indent: 2em;">
            在各类优惠券中，<span style="color:#FF834C">{{reportData.mostUsedTypeName}}</span>的表现最为突出，无论是使用率还是转化率都遥遥领先，建议后续考虑加大对此类优惠券的发行力度。</div>
          <div>相对地，<span style="color:#fe8463">{{reportData.leastUsedTypeName}}</span>的各项指标都表现较差，可能需要重新评估其吸引力和适用性，建议后续减少发行量，或考虑调整其优惠策略以提高效果.</div>
        </div>
      <div style="width: 250px; height: 200px;margin-top: 20px" ref="chartRef"></div>

    </el-card>

    <div class="statistics-layout">
      <div class="layout-title">优惠券统计</div>
      <el-row>
        <el-col :span="3">
          <div style="padding: 20px">
            <div>
              <div style="color: #909399;font-size: 14px">代金券使用总数</div>
              <div style="color: #606266;font-size: 24px;padding: 10px 0">{{statisticData.voucherNum}}</div>
              <div>
                <span class="color-success" style="font-size: 14px">+10%</span>
                <span style="color: #C0C4CC;font-size: 14px">同比上周</span>
              </div>
            </div>
            <div style="margin-top: 20px;">
              <div style="color: #909399;font-size: 14px">满减券使用总数</div>
              <div style="color: #606266;font-size: 24px;padding: 10px 0">{{statisticData.fullDiscountNum}}</div>
              <div>
                <span class="color-success" style="font-size: 14px">+10%</span>
                <span style="color: #C0C4CC;font-size: 14px">同比上周</span>
              </div>
            </div>
            <div style="margin-top: 20px;">
              <div style="color: #909399;font-size: 14px">折扣券使用总数</div>
              <div style="color: #606266;font-size: 24px;padding: 10px 0">{{statisticData.discountNum}}</div>
              <div>
                <span class="color-success" style="font-size: 14px">+10%</span>
                <span style="color: #C0C4CC;font-size: 14px">同比上周</span>
              </div>
            </div>
            <div style="margin-top: 20px;">
              <div style="color: #909399;font-size: 14px">兑换券使用总数</div>
              <div style="color: #606266;font-size: 24px;padding: 10px 0">{{statisticData.exchangeNum}}</div>
              <div>
                <span class="color-danger" style="font-size: 14px">-10%</span>
                <span style="color: #C0C4CC;font-size: 14px">同比上周</span>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="21">
          <div style="width: 950px; height: 500px;margin-right: 50px" ref="echarts1"></div>
        </el-col>
      </el-row>
    </div>

  </div>
  <!-- 输入未使用优惠券弹窗 -->
  <div>
    <el-dialog
        v-model="dataDialogVisible"
        title="提示"
        center
        width="30%"
        :custom-class="'rounded-dialog'"
    >
      <el-form ref="form" :model="numForm" label-width="130px" :rules="rules" style="margin-right: 10px">
        <el-form-item label="全部订单数量：" prop="totalNum">
          <el-input v-model="numForm.totalNum"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer" >
          <el-button type="primary"  style="margin-bottom: 10px" @click="getCouponsData">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import coupons_usage_rate from '@/assets/coupons/usageRate.png'
import coupons_percent_conversion from '@/assets/coupons/percentConversion.png'
import coupons_sales_increase from '@/assets/coupons/salesIncrease.png'
import axios from "axios";
import * as echarts from "echarts";
export default{
  name: "couponMonitor",
  data() {
    return {
      dataDialogVisible:true,
      numForm:{
      totalNum:''
    },
      //代金券
      voucherData:{
      usageRate:"",  //优惠券使用率
      percentConversion:"",  //优惠券转化率
      salesIncrease:""  //优惠券销售提升
    },
      //满减券
      fullDiscountData:{
      usageRate:"",  //优惠券使用率
      percentConversion:"",  //优惠券转化率
      salesIncrease:""  //优惠券销售提升
    },
      //折扣券
      discountData:{
      usageRate:"",  //优惠券使用率
      percentConversion:"",  //优惠券转化率
      salesIncrease:""  //优惠券销售提升
    },
      //兑换券
      exchangeData:{
      usageRate:"",  //优惠券使用率
      percentConversion:"",  //优惠券转化率
      salesIncrease:""  //优惠券销售提升
    },
      coupons_usage_rate,
      coupons_percent_conversion,
      coupons_sales_increase,
      rules: {
      totalNum: [
        { required: true, message: '请输入广告主编号', trigger: 'blur' }]
    },
      option: {
      color: ['#619F4A'],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        },
        formatter: function (params) {
          let str1 = ` <div class="toolTip">
          <div class="toolTipHeader">
            <span class="toolTipValue">${params[0].name}</span>
          </div>
          <div class="toolTipCon">`

          const htmlStr = `<div>
          <span class="toolTipValue">${params[0].seriesName}</span>：<span class="toolTipValue">${params[0].value}%</span><br>
          <span class="toolTipValue">${params[1].seriesName}</span>：<span class="toolTipValue">${params[1].value}%</span><br>
          <span class="toolTipValue">${params[2].seriesName}</span>：<span class="toolTipValue">${params[2].value}%</span><br>
          </div>`;
          let str2 = ` </div>
          </div>`
          return str1 + htmlStr + str2;
        },
      },
      legend: {
        data: ['使用率', '转换率', '销售提升']
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
      },
      yAxis: {
        type: 'category',
        data: [],
        axisLabel: {
          show: true,
          interval: 'auto',
          formatter: '{value}',
        },
      },
      series: [
        {
          name: '使用率',
          type: 'bar',
          itemStyle: {
            normal: {
              opacity: 0.8,
              label: {
                textStyle: {
                  color: '#000000',
                  fontSize: 3
                },
                show: true,
                position: 'right',
                formatter: '{c}%',
                }
              }
            },
            data: [],
          },
        {
            name: '转换率',
            type: 'bar',
            itemStyle: {
              normal: {
                color: '#CFDD54',
                opacity: 0.8,
                label: {
                  textStyle: {
                    color: '#000000',
                    fontSize: 3
                  },
                  show: true,
                  position: 'right',
                  formatter: '{c}%',
                }
              }
            },
            data: []
          },
        {
          name: '销售提升',
          type: 'bar',
          itemStyle: {
            normal: {
              color: '#98B22D',
              opacity: 0.8,
              label: {
                textStyle: {
                  color: '#000000',
                  fontSize: 3
                },
                show: true,
                position: 'right',
                formatter: '{c}%',
              }
            }
          },
          data: []
        },
      ]
    },
      option1:{
        title: {
          left: '50%',
          textAlign: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: '#ddd'
            }
          },
          backgroundColor: 'rgba(255,255,255,1)',
          padding: [5, 10],
          textStyle: {
            color: '#7588E4',
          },
          extraCssText: 'box-shadow: 0 0 5px rgba(0,0,0,0.3)'
        },
        //<!--1为代金券 2为满减劵 3为折扣劵 4为兑换券 -->
        legend: {
          right: 1,
          orient: 'vertical',
          data: ['代金券','满减劵','折扣劵','兑换券']
        },
        xAxis: {
          type: 'category',
          data: ['2024-03-05','2024-03-10','2023-03-11'],
          boundaryGap: false,
          splitLine: {
            show: true,
            interval: 'auto',
            lineStyle: {
              color: ['#daebc7']
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#287042'
            }
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 14
            }
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              color: ['#daebc7']
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#287042'
            }
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 14
            }
          }
        },
        //<!--1为代金券 2为满减劵 3为折扣劵 4为兑换券 -->
        series: [{
          name: '代金券',
          type: 'line',
          smooth: true,
          showSymbol: false,
          symbol: 'circle',
          symbolSize: 6,
          data: ['0', '5', '0'],
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(247, 236, 190, 0.5)'
              }, {
                offset: 1,
                color: 'rgba(247, 236, 190, 0.5)'
              }], false)
            }
          },
          itemStyle: {
            normal: {
              color: '#F6C915'
            }
          },
          lineStyle: {
            normal: {
              width: 3
            }
          }
        }, {
          name: '满减劵',
          type: 'line',
          smooth: true,
          showSymbol: false,
          symbol: 'circle',
          symbolSize: 6,
          data: ['1', '1', '2'],
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(235, 239, 165, 0.5)'
              }, {
                offset: 1,
                color: 'rgba(235, 239, 165, 0.5)'
              }], false)
            }
          },
          itemStyle: {
            normal: {
              color: '#619F4A'
            }
          },
          lineStyle: {
            normal: {
              width: 3
            }
          }
        }, {
          name: '折扣劵',
          type: 'line',
          smooth: true,
          showSymbol: false,
          symbol: 'circle',
          symbolSize: 6,
          data: ['1', '1', '1'],
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(235, 239, 165, 0.5)'
              }, {
                offset: 1,
                color: 'rgba(235, 239, 165, 0.5)'
              }], false)
            }
          },
          itemStyle: {
            normal: {
              color: '#C4D76E'
            }
          },
          lineStyle: {
            normal: {
              width: 3
            }
          }
        }, {
          name: '兑换券',
          type: 'line',
          smooth: true,
          showSymbol: false,
          symbol: 'circle',
          symbolSize: 6,
          data: ['1', '3', '1'],
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(216, 244, 247,0.5)'
              }, {
                offset: 1,
                color: 'rgba(216, 244, 247,0.5)'
              }], false)
            }
          },
          itemStyle: {
            normal: {
              color: '#FFB129'
            }
          },
          lineStyle: {
            normal: {
              width: 3
            }
          }
        }]
      },
      option2:{},
      value:90,
      reportData: {
        totalCouponsNum:'',
        usedCouponsNum:'',
        usageRate:'',
        salesIncrease:'',
        mostUsedTypeName:'',
        leastUsedTypeName:'',
        totalScore:''
      },
      statisticData: {
        voucherNum:'',
        fullDiscountNum:'',
        discountNum:'',
        exchangeNum:''
      }

    }
  },
  methods:{
    async getCouponsData(){
      try {
        const res = await axios.post('/couponMonitor/getCouponsData/'+this.numForm.totalNum);
        const reportRes = await axios.post('/couponMonitor/getCouponsReportData/'+this.numForm.totalNum);
        const statisticRes = await axios.post('/couponMonitor/getStatisticData');
        if (res.status === 200 && reportRes.status === 200 && statisticRes.status === 200) {
          this.$message.success('获取优惠券监控数据成功');
          this.voucherData=res.data.data[0];
          this.fullDiscountData=res.data.data[1];
          this.discountData=res.data.data[2];
          this.exchangeData=res.data.data[3];
          this.dataDialogVisible=false;
          console.log("获取优惠券监控数据",res);

          // 将数据分别按照usageRate，percentConversion和salesIncrease存储到对应的数组中
          this.option.series[0].data = res.data.data.map(item => item.usageRate);
          this.option.series[1].data = res.data.data.map(item => item.percentConversion);
          this.option.series[2].data = res.data.data.map(item => item.salesIncrease);
          this.option.yAxis.data = res.data.data.map(item => item.name);

          console.log("yAxis传输值：",this.option.yAxis.data);
          console.log("series[0]传输值：",this.option.series[0].data);
          console.log("series[1]传输值：",this.option.series[1].data);
          console.log("series[2]传输值：",this.option.series[2].data);

          this.reportData=reportRes.data.data;
          this.value=this.reportData.totalScore;

          this.statisticData=statisticRes.data.data;
          console.log("统计数据",this.statisticData);

          this.initChart2();
          this.getEcharts();
        } else {
          this.$message.error('添加失败');
        }
      }catch (error) {
        this.$message.warning('出错了');
      }
    },
    getEcharts() {
      const myEcharts = echarts.init(this.$refs.echarts);
      myEcharts.setOption(this.option);
    },
    getEcharts1() {
      const myEcharts1 = echarts.init(this.$refs.echarts1);
      myEcharts1.setOption(this.option1);
    },
    initChart2(){
      this.option2={
        title: {
          text: `${this.value}分`,
          subtext: '综合评分',
          left: 'center',
          top: 'center', //top待调整
          textStyle: {
            color: '#619f4a',
            fontSize: 55,
            fontFamily: 'DINAlternate-Bold',
          },
          subtextStyle: {
            color: '#619f4a',
            fontSize: 20,
            fontFamily: 'PingFangSC-Regular',
            top: 'center'
          },
          itemGap: -4 //主副标题间距
        },
        xAxis: {
          splitLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          axisLine: {
            show: false
          }
        },
        yAxis: {
          splitLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          axisLine: {
            show: false
          }
        },
        series: [
          // 进度圈
          {
            type: 'pie',
            clockWise: true,
            radius: ["90%", "80%"],
            data: [{
              value: this.value,
              itemStyle: {
                normal: {
                  borderWidth: 12,
                  borderColor: {
                    colorStops: [{
                      offset: 0,
                      color: '#b7d332' || '#eaffd9' // 0% 处的颜色
                    }, {
                      offset: 1,
                      color: '#b7d332' || '#b8e48a' // 100% 处的颜色
                    }]
                  },
                  color: { // 完成的圆环的颜色
                    colorStops: [{
                      offset: 0,
                      color: '#ffffff' || '#ffffff' // 0% 处的颜色
                    }, {
                      offset: 1,
                      color: '#ffffff' || '#ffffff' // 100% 处的颜色
                    }]
                  },
                  label: {
                    show: false
                  },
                  labelLine: {
                    show: false
                  },
                },
              }
            },
              {
               // name: 'gap',
                value: 100 - this.value,
                itemStyle: {
                  normal: {
                    label: {
                      show: false
                    },
                    labelLine: {
                      show: false
                    },
                    color: 'rgba(0, 0, 0, 0)',
                    borderColor: 'rgba(0, 0, 0, 0)',
                    borderWidth: 0,
                  }
                },
              }
            ]
          },
          //刻度尺
          {
            // name: "白色圈刻度",
            type: "gauge",
            radius: "67%",
            startAngle: 225, //刻度起始
            endAngle: -134.8, //刻度结束
            z: 4,
            axisTick: {
              show: true,
              lineStyle: {
                width: 2,
                color: 'rgba(2254, 222, 75, 0.5)'
              }
            },
            splitLine: {
              length: 16, //刻度节点线长度
              lineStyle: {
                width: 2,
                color: 'rgba(254, 222, 75, 0.5)'
              } //刻度节点线
            },
            axisLabel: {
              color: 'rgba(255,255,255,0)',
              fontSize: 12,
            }, //刻度节点文字颜色
            pointer: {
              show: false
            },
            axisLine: {
              lineStyle: {
                opacity: 0
              }
            },
            detail: {
              show: false
            },
            data: [{
              value: 0,
              name: ""
            }]
          },
          // 刻度圈
          {
            "type": "pie",
            "radius": ["0%", "73%"],
            "center": ["50%", "50%"],
            "avoidLabelOverlap": false,
            "label": {
              "normal": {
                "show": false,
                "position": "center"
              },
              "emphasis": {
                "show": false,
                "textStyle": {
                  "fontWeight": "bold"
                }
              }
            },
            "itemStyle": {
              "normal": {
                "color": {
                  "type": "linear",
                  "x": 0,
                  "y": 0,
                  "x2": 0,
                  "y2": 1,
                  "colorStops": [{
                    "offset": 0.05,
                    "color": "rgba(148, 211, 125, 0.2)"
                  }, {
                    "offset": 0.5,
                    "color": "rgba(148, 211, 125,0.3)"
                  }, {
                    "offset": 0.95,
                    "color": "rgba(148, 211, 125, 0.2)"
                  }]
                }
              }
            },
            "labelLine": {
              "normal": {
                "show": false
              }
            },
            "data": [{
              "value": 3235
            }]
          }
        ],
      };
      this.option2.chartInstance = echarts.init(this.$refs.chartRef);

      this.option2.chartInstance.setOption(this.option2);
    }
  },
  mounted() {
    this.getEcharts1();


  },

}
</script>
<style scoped>
@import "@/theme/common.css";
.app-container {
  margin-top: 40px;
  margin-left: 120px;
  margin-right: 120px;
}

.address-layout {
}

.total-layout {
  margin-top: 20px;
}

.total-frame {
  border: 1px solid #DCDFE6;
  padding: 20px;
  height: 100px;
}

.total-icon {
  width: 70px;
  height: 60px;
}

.total-title {
  position: relative;
  font-size: 16px;
  color: #909399;
  left: 80px;
  top: -50px;
}

.total-value {
  position: relative;
  font-size: 18px;
  color: #606266;
  left: 80px;
  top: -40px;
}

.un-handle-layout {
  margin-top: 20px;
  border: 1px solid #DCDFE6;
}

.layout-title {
  color: #606266;
  padding: 15px 20px;
  background: #F2F6FC;
  font-weight: bold;
}

.un-handle-content {
  padding: 20px 40px;
}

.un-handle-item {
  border-bottom: 1px solid #EBEEF5;
  padding: 10px;
}

.overview-layout {
  margin-top: 20px;
}

.overview-item-value {
  font-size: 24px;
  text-align: center;
}

.overview-item-title {
  margin-top: 10px;
  text-align: center;
}

.out-border {
  border: 1px solid #DCDFE6;
}

.statistics-layout {
  margin-top: 20px;
  border: 1px solid #DCDFE6;
}
.mine-layout {
  position: absolute;
  right: 45px;
  top: 126px;
  width: 280px;
  height: 706px;

}

.address-content{
  padding: 20px;
  font-size: 18px
}


.carousel-item {
  color: #f56d6d;
  opacity: 0.75;
  margin: 0;
  text-align: center;
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  display: flex;
  align-items: center;
  margin: 0;
  text-align: center;
  height: 100%;
}

.el-carousel__item:nth-child(2n) {
  background-color: #f8f8f8;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #f8f8f8;
}
.head-container {
  background: #F2F6FC;
  height: 50px;
  margin: -20px -20px 0;
  line-height: 50px;
  color: #606266;
  padding: 2px ;
  font-weight: bold;
}

</style>